<template>
   <div class="watermark-container" v-if="showWatermark">
      {{watermarks}}
      <div
           v-for="(watermark, index) in watermarks"
           :key="index"
           class="watermark-text"
           :style="{
              color: watermark.color,
              transform: `rotate(${watermark.rotate}deg)`,
              top: `${watermark.top}px`,
              right: `${watermark.right}px`
            }"
      >
         {{ watermark.text }}
      </div>
   </div>
</template>

<script>
    export default {
        data() {
            return {
                watermarks: [],
                showWatermark: false
            };
        },
        props: {
            text: {
                type: String,
                default: "Watermark Text"
            },
            color: {
                type: String,
                default: "rgba(0, 0, 0, 0.1)"
            },
            rotate: {
                type: Number,
                default: 45
            },
            autoPlay: {
                type: Boolean,
                default: true
            },
            interval: {
                type: Number,
                default: 2000
            }
        },
        computed: {
            randomTop() {
                return Math.floor(Math.random() * window.innerHeight);
            }
        },
        methods: {
            generateWatermark() {
                this.watermarks.push({
                    text: this.text,
                    color: this.color,
                    rotate: this.rotate,
                    top: this.randomTop,
                    // right: window.innerWidth
                    right: 500
                });
            },
            startAnimation() {
                if (this.autoPlay) {
                    this.showWatermark = true;
                    this.generateWatermark();

                    console.log(this.watermarks)

                }
            },
            moveWatermark() {

            }
        },
        mounted() {
            this.startAnimation();
        }
    };
</script>

<style scoped>
   .watermark-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 9999;
   }

   .watermark-text {
      position: absolute;
      white-space: nowrap;
      font-size: 16px;
      opacity: 0.5;
      pointer-events: none;
   }
</style>